<template>
  <div class="w">

    <!-- 标题 -->
    <div class="title-area">
      <span>
        解决方案
      </span>
    </div>

    <!-- 主体内容显示区 -->
    <div class="content-area">

      <!-- 查询表单区 -->
      <div class="form-area">
        <Form
          name="queryForm"
          ref="queryForm"
          :model="queryForm"
          :labelCol="{span: 5, offset: 0}"
          :initialValues="{}">

          <Row :gutter="16">
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="name" label="方案名称" initialValue="">
                  <Input placeholder="请输入方案名称" style="width: 70%" v-model="queryForm.name" />
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="product" label="产品" initialValue="">
                  <Input placeholder="请选择产品" style="width: 70%" v-model="queryForm.product" />
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="appType" label="应用类型" initialValue="">
                  <Select
                    placeholder="请选择应用类型"
                    style="width: 70%"
                    v-model="queryForm.appType"
                    allowClear>
                    <Option key="1" value="OA" label="OA" />
                    <Option key="2" value="ERP" label="ERP" />
                    <Option key="3" value="平台" label="平台" />
                  </Select>
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="programmeType" label="方案类型" initialValue="">
                  <Select
                    placeholder="请选择方案类型"
                    style="width: 70%"
                    v-model="queryForm.programmeType"
                    allowClear>
                    <Option key="1" value="单机" label="单机" />
                    <Option key="2" value="高可用" label="高可用" />
                    <Option key="3" value="读写分离" label="读写分离" />
                  </Select>
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem :wrapperCol="{span: 20, offset: 5}">
                  <Button type="primary" @click="onSubmit">查 询</Button>
                  <Button style="margin-left: 10px" @click="onReset">重 置</Button>
                  <Button type="link" style="color: #b30000">更多 <Icon name="down" style="vertical-align: middle" /></Button>
                </FormItem>
              </div>
            </Col>
          </Row>  
        </Form>
      </div>

      <!-- 分割线 -->
      <Divider />

      <!-- 按钮区 -->
      <div class="button-area">
        <Button type="primary" @click="showFormPage">
          <Icon name="add" /> 新增
        </Button>
      </div>

      <!-- 列表区 -->
      <Table
        style="margin-top: 20px"
        :columns="tableColumns"
        :dataSource="tableData"
        :bordered="false"
        :rowKey="(record) => record.key"
        @change="handleTableChange"
        :scroll="{y: 470}"
        :pagination="{
          total: tableData.length,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSize,
          current,
        }">
        <template #paginationTotal="props">
          <span>总共{{ props.total }} 条</span>
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
export default {
    name: "app",
    data: function () {
      return {
        queryForm: {
          name: "",
          address: "",
          contact: "",
          tel: ""
        },
        tableData: [
          { "id":"1",  "name":"方案_达梦",     "programmeNo":"dm10010",     "product":"v1.0企业版", "scene":"A,B", "programmeType":"单机", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
          { "id":"2",  "name":"方案_金仓",     "programmeNo":"kb10016",     "product":"v1.0企业版", "scene":"A,B,C", "programmeType":"高可用", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
          { "id":"3",  "name":"方案_神舟通用", "programmeNo":"st15185",     "product":"v1.0企业版", "scene":"A,C", "programmeType":"单机", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
          { "id":"4",  "name":"方案_南大通用", "programmeNo":"nd12315",     "product":"v1.0企业版", "scene":"B,C", "programmeType":"读写分离", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
          { "id":"5",  "name":"方案_瀚高",     "programmeNo":"hg18588",     "product":"v1.0企业版", "scene":"A,B,D", "programmeType":"高可用", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
          { "id":"6",  "name":"方案_万里开源", "programmeNo":"wl188888",    "product":"v1.0企业版", "scene":"C,B,D", "programmeType":"读写分离", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
          { "id":"7",  "name":"方案_易鲸捷",   "programmeNo":"yjj8000",     "product":"v1.0企业版", "scene":"A,B", "programmeType":"单机", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
          { "id":"8",  "name":"方案_优炫",     "programmeNo":"yx_5001",     "product":"v1.0企业版", "scene":"A,B", "programmeType":"读写分离", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
          { "id":"9",  "name":"方案_海量数据", "programmeNo":"hl_data_01",  "product":"v1.0企业版", "scene":"B,C", "programmeType":"单机", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
          { "id":"10", "name":"方案_云和恩墨", "programmeNo":"cc_bg1024",   "product":"v1.0企业版", "scene":"B,D", "programmeType":"高可用", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
        ],
        tableColumns: [
          {"title":"序号", "dataIndex":"id", "key":"id", width: 60},
          {"title":"方案名称", "dataIndex":"name", "key":"name"},
          {"title":"方案编码", "dataIndex":"programmeNo", "key":"programmeNo"},
          {"title":"产品名称", "dataIndex":"product", "key":"product"},
          {"title":"适用场景", "dataIndex":"scene", "key":"scene"},
          {"title":"方案类型", "dataIndex":"programmeType", "key":"programmeType"},
          {"title":"入库时间", "dataIndex":"storeTime", "key":"storeTime", "width":200},
          {"title":"操作", "dataIndex":"operation", "key":"operation", "width":200,
            render: (text, record, index) => {
              return this.$createElement('span', {}, [
                this.$createElement('a', { on: { click: () => this.tblOptEdit(record) } }, '编辑'),
                this.$createElement('span', { style: "color: #D8D8D8;" }, ' | '),
                this.$createElement('a', { on: { click: () => this.tblOptRemove(record) } }, '删除')
              ])
            }
          },
          // {"title":"操作", "dataIndex":"operation", "key":"operation"},
        ],
        current: 1,
        pageSize: 5,
      }
    },
    methods: {
      tblOptEdit: function (record) {
        this.$router.push({
          path: '/solutionDetails',
          query: { record: record }
        });
      },
      tblOptRemove: function (record) {
        console.log("tblOptRemove: ", record);
      },
      onSubmit: function () {
        console.log('on submit: ', this.queryForm);
        // this.$refs.queryForm.submit();
      },
      onReset: function () {
        console.log('on reset');
        this.queryForm = {
          name: "",
          product: "",
          appType: "",
          programmeType: ""
        }
        // this.$refs.queryForm.reset();
      },
      handleTableChange: function (p, filters) {
        const { current, pageSize } = p;
        this.current = current;
        this.pageSize = pageSize;
        console.log('===>>>>filters', p, filters);
      },
      showFormPage: function () {
        this.$router.push('/solutionForm')
      }
    }
}
</script>

<style scoped>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 15px;
  }

  /* 查询表单区 */
  .form-area {
    /* background-color: lightcyan; */
    margin-left: 50px;
    margin-right: 50px;
  }
  .formGrid {
    /* background-color: orange; */
    margin-top: 15px;
    height: 35px;
    line-height: 35px;
  }

  .uni-divider {
    margin: 0;
  }

  /* 按钮区 */
  .button-area {
    margin-top: 15px;
    /* background-color: lightcyan; */
  }
  .button-area svg {
    margin-top: 3px;
    margin-right: 5px;
  }

  /* 列表区 */
</style>

